extends layout

block content
	script(src="/javascripts/aaron/common.js")
	script(src="/javascripts/aaron/nodes.js")
	script(src="/javascripts/aaron/orgchart.js")
	link(rel='stylesheet', href='/stylesheets/aaron/style.css')
	div(style="position:fixed;width:250px;height:800px;z-index:0;top:30px;right:0px;background-color:#fff", class="righNav")
			table(cellpadding=2, width="100%", style="margin-top:20px;background-color:#fff")
				tr
					td(style="text-indent:5px;background-color:#eee") 
						img(src="/images/controls.gif", style="border:0px;vertical-align:middle")
						label &nbsp;Controls
				tr
					td(valign="top")
						table(border=0, width="100%")
							tr
								td
									a(class="control addNode",id="", style="cursor:pointer",type="2")
										img(src="/images/node.png", style="border:0px;vertical-align:middle")
										label(style="cursor:pointer") &nbsp Add Node
				tr
					td(style="text-indent:5px;background-color:#eee")
						img(src="/images/properties.gif", style="border:0px;vertical-align:middle")
						label &nbsp;Properties
				tr
					td
						table(cellpadding=5)
							tr(style="display:none")
									td Node ID:
									td
										input(id="node_id",type="text")
							tr
									td Height:
									td
										input(class="nodeHeight",type="text",onkeyup="setNodeProperty(this, 'Height')",maxlength="3")
							tr
									td Width:
									td
										input(class="nodeWidth",type="text",onkeyup="setNodeProperty(this, 'Width')",maxlength="3")
							tr
								td Dept:
								td
									input(class="nodeDepartment",type="text",onkeyup="setNodeProperty(this, 'Dept')")
							tr
								td Head:
								td
									div(class="orgchartDeptUsers orgChartHead")
									a(class="classname",id="orgchartDeptHead",style="cursor:pointer;height:11px",onclick="showModal('#cList','Head','orgChartHead','radio',1)") ...
							tr
								td Assistant Head:
								td
									div(class="orgchartDeptUsers orgChartAsstHead")
									a(class="classname",style="cursor:pointer;height:11px",onclick="showModal('#cList','Assistant Head','orgChartAsstHead','radio',1)") ...
							tr
								td(valign="top") Members:
								td
									div(class="orgchartDeptUsers orgChartMembers",style="height:150px;overflow:auto")
									a(class="classname",style="cursor:pointer;height:11px;",onclick="showModal('#cList','Members','orgChartMembers','checkbox',2)") ...
									
									
				
	div(id="cList", title="Employee List",style="display:none;height:auto:width:auto")
		table(width="100%")
			tr
				td(style="display:none")
					input(type="text",id="txtorgchartDeptUsers",value="")
			tr
				td
					label(class="orgchartUserTitle") Enter choices per line:
			tr
				td
					div(class="userDepartment",type="div")
			tr
				td(align="right")
					input(type="button", value="OK", class="classname", id="orgchartDeptUsersOk", style="cursor:pointer",onclick="appendUserOrgchart('#cList')") 
				
		
	div(id="divSave",title="Save as...",style="display:none")
		
		
		form(method="POST", name="orgchart")
			table(width="100%")
				tr
					td
						label Title:
					td
						input(type="text", name="orgChartTitle", id="orgChartTitle", style="width:340px")
				tr
					td
						label Description:
					td
						textarea(name="description",rows="4", cols="60",id="orgChartDesc", style="resize:none")
				tr
					td
						label Status:
					td
						select(id="orgChartStatus", style="width:325px",onchange="warningActivateOrgchart(this)")
							option(value="0") Deactivated
							option(value="1") Activated
				tr
					td &nbsp;
					td(align="right")
						input(type="button", id="saveOrgchart", class="classname", value="Save",onclick="saveNewOrgchart()")
		
			
	div(id="",style="z-index:-1;width:auto;height:auto;display:none")
		a(class="classname",id="saveOrgchart",style="cursor:pointer") Save
		label &nbsp;
		a(href="/",class="classname",id="closeOrgchart",style="cursor:pointer") Close
			
	hr
	div(class="leftPanel",id="droppable",style="overflow:auto;z-index:-1;background-image:url('/images/workspace.jpg');width:900px;height:700px;border:1px Solid #ccc")
	div(class="nodeContent",style="display:none")
		input(type="text",class="startCtr",value="#{startCtr}") 
		span(class="nodesDB") #{nodes}
		br
		span(class="linesDB") #{lines}
					
					
					